<template>
  <page-header-wrapper :title="false">
    <a-card>
      <div slot="title">
        <a-row :gutter="10" :style="{ height: '40px', lineHeight: '40px' }">
          <a-col :span="14">
            <a-row type="flex" justify="start">
              <a-col :span="3">日程总览</a-col>
              <a-col :span="6">
                <div class="call-wrapper">
                  今日通次 <a>{{ callData.today_call_num }}(次)</a>
                  <a-divider type="vertical" />
                  今日通时 <a>{{ Math.floor(callData.today_call_duration/60) }}(分)</a>
                </div>
              </a-col>
              <a-col :span="12">
                <a-carousel :dots="false" autoplay>
                  <router-link v-for="item in msgList" :key="item.id" :to="{ name: 'MessageDetail', params: { id: item.id } }">
                    <a-alert showIcon type="info">
                      <template slot="message">
                        <ellipsis :length="50">【{{ msgOpts[item.msg_type] }}】{{ item.title }}</ellipsis>
                      </template>
                    </a-alert>
                  </router-link>
                </a-carousel>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="10">
            <div :style="{ textAlign: 'right' }">
<!--              <a-button type="danger" @click="trademarkModal">好商标名，要注册</a-button>-->
<!--              <a-divider type="vertical" />-->
              <a-button type="danger" @click="addCustomerModal">添加客户</a-button>
              <a-divider type="vertical" />
              <a-button type="danger" @click="$router.push({ name: 'Wechat' })">微信</a-button>
            </div>
          </a-col>
        </a-row>
      </div>
      <a-row :gutter="5">
        <a-col :span="3">
          <a-card class="l-work-item" hoverable @click="handleModulesTabs(1)">
            <div class="title">{{ countData.unread_business_count }}</div>
            <div class="content">超时未联系</div>
          </a-card>
        </a-col>
        <a-col :span="3">
          <a-card class="l-work-item" hoverable @click="handleModulesTabs(3)">
            <div class="title">{{ countData.unread_business_count }}</div>
            <div class="content">业务更新</div>
          </a-card>
        </a-col>
        <a-col :span="3">
          <a-card class="l-work-item" hoverable @click="handleModulesTabs(4)">
            <div class="title">{{ countData.old_customer_count }}</div>
            <div class="content">老客户回访</div>
          </a-card>
        </a-col>
        <a-col :span="4">
          <a-card class="l-work-item" hoverable @click="onReceive('new')">
            <div class="title">*</div>
            <div class="content">可领新资源</div>
          </a-card>
        </a-col>
        <a-col :span="4">
          <a-card class="l-work-item" hoverable @click="onReceive('old')">
            <div class="title">*</div>
            <div class="content">资源加油站</div>
          </a-card>
        </a-col>
        <a-col :span="3">
          <a-card class="l-work-item" hoverable @click="onReceive('hot')">
            <div class="title">*</div>
            <div class="content">热资源</div>
          </a-card>
        </a-col>
        <a-col :span="4">
          <a-card v-if="currentCompany != 'ah'" class="l-work-item2" hoverable @click="onStateModal">
            <template slot="cover">
              <a-row :gutter="[0,5]">
                <a-col :span="24"><b :style="{ fontSize: '16px' }">我的数据</b></a-col>
                <a-col :span="24" :style="{ fontSize: '14px' }">业绩排名 <a-tag color="red" :style="{ marginLeft: '10px', cursor: 'pointer' }">{{ countData.ranking }}</a-tag></a-col>
                <a-col :span="24" :style="{ fontSize: '14px' }">领新排名 <a-tag color="red" :style="{ marginLeft: '10px', cursor: 'pointer' }">{{ countData.this_month_lx_count }}</a-tag></a-col>
                <a-col :span="24" :style="{ fontSize: '14px' }">当前业绩 <a-tag color="red" :style="{ marginLeft: '10px', cursor: 'pointer' }">{{ countData.this_month_yj }}</a-tag></a-col>
              </a-row>
            </template>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
    <timeout-customer v-if="cardModules == 1"></timeout-customer>
    <business-update v-if="cardModules == 3"></business-update>
    <paid-customer v-if="cardModules == 4"></paid-customer>
    <state v-if="stateVisible" @cancel="onStateCancel"></state>
    <call-phone :type="receiveType" v-if="customerVisible" @cancel="handleExit"></call-phone>
    <hot-modal :type="receiveType" v-if="hotVisible" @cancel="hotExit"></hot-modal>
    <add-customer v-if="addCustomerVisible" @cancel="addCustomerExit"></add-customer>
    <add-trademark v-if="addTrademarkVisible" @cancel="trademarkExit"></add-trademark>
  </page-header-wrapper>
</template>

<script>
  import { CallPhone, HotModal } from '@/components'
  import { BusinessUpdate, PaidCustomer, TimeoutCustomer, State, AddTrademark, AddCustomer } from './components'
  import { getData } from '@/api/adviser'
  import { getCallNum } from '@/api/common'
  import Ellipsis from '@/components/Ellipsis/Ellipsis'
  import storage from 'store'
  import { getMessage } from '@/api/message'
  import { CURRENT_COMPANY } from '@/store/mutation-types'

  export default {
    name: 'AdviserIndex',
    components: {
      Ellipsis,
      CallPhone,
      BusinessUpdate,
      PaidCustomer,
      TimeoutCustomer,
      State,
      HotModal,
      AddTrademark,
      AddCustomer
    },
    data () {
      return {
        customerVisible: false,
        cardModules: '',
        receiveType: '',
        countData: {},
        callData: {},
        stateType: '1',
        stateVisible: false,
        hotVisible: false,
        itemWidth: '210px',
        addCustomerVisible: false,
        addTrademarkVisible: false,
        type: storage.get('Group_Type'),
        currentCompany: storage.get(CURRENT_COMPANY),
        msgList: [],
        msgOpts: {}
      }
    },
    created () {
      this.getIndexData()
      this.getMsg()
    },
    methods: {
      getMsg () {
        getMessage().then(res => {
          this.msgList = res.result.data
          this.msgOpts = res.result.msg_opts
        })
      },
      getNums () {
        const app = this
        getCallNum().then(res => {
          if (res.status === 0) {
            app.callData = res.result
          }
        })
      },
      onStateModal () {
        this.stateVisible = true
      },
      onStateCancel (visible) {
        this.stateVisible = visible
      },
      /**
       * 1: 三天未开单
       * 2: 新资源库
       * 3: 业务更新
       * 4: 老客户超时未联系
       * 5: 共享库资源
       * 6: 团队任务
       */
      handleModulesTabs (key) {
        this.cardModules = key
      },
      onReceive (type) {
        const app = this
        app.receiveType = type
        if (type === 'new' || type === 'old') {
          app.customerVisible = true
        } else if (type === 'hot') {
          if (app.type === 'pt') {
            app.hotVisible = true
          } else {
            this.$warning({
              title: '商标类型顾问暂未开启热资源'
            })
          }
        }
      },
      addCustomerModal () {
        this.addCustomerVisible = true
      },
      addCustomerExit (visible) {
        this.addCustomerVisible = visible
      },
      trademarkModal () {
        this.addTrademarkVisible = true
      },
      trademarkExit (visible) {
        this.addTrademarkVisible = visible
      },
      handleExit (visible) {
        this.customerVisible = visible
      },
      hotExit (visible) {
        this.hotVisible = visible
      },
      getIndexData () {
        const app = this
        getData().then(res => {
          if (res.status === 0) {
            app.countData = res.result
            app.getNums()
            app.countLoading = false
          }
        })
      }
    }
  }
</script>

<style scoped>
  .l-adviser-comeon {
    padding-left: 40px;
    background: url('../../assets/images/adviser/gb.png') left center no-repeat;
    line-height:20px;
    font-size: 12px;
  }
  .l-work-item{
    height: 130px;
    background: #88b665;
    color: #fff;
  }
  .l-work-item .title {
    font-size: 30px;
    font-weight: 400;
  }
  .l-work-item .content {
    font-size: 16px;
  }
  .l-work-item2 {
    height: 130px;
    padding: 5px 0 0 10px;
    background:#fff;
  }
  .call-wrapper {
    font-size: 14px;
  }
</style>
